<template>
  <div>social -- {{ count }}
    <div>
      <el-button @click="count++">修改count</el-button>
    </div>
    <div>
      <Tree :data="data" />
    </div>
    <div>
      <Bcom
        :a="count"
        :b="2"
        @update="updateCount"
      />
    </div>
  </div>
</template>

<script>
import Tree from './tree.vue'
import Bcom from './B.vue'

export default {
  name: 'Social',
  components: {
    Tree,
    Bcom
  },
  provide() {
    return {
      // 通过provide传递数据，不是响应式的，
      // 父组件数据发生了改变，孙子不会改变，得不到父组件的变化, 解决办法就是不传递数据，直接传递函数
      // count11: this.count
      count11: this.getNewCount
    }
  },
  data() {
    return {
      data: [
        {
          name: '测试1',
          children: [
            {
              name: '测试2'
            },
            {
              name: '测试2'
            },
            {
              name: '测试3',
              children: [
                {
                  name: '测试4'
                }
              ]
            }
          ]
        }
      ],
      count: 10
    }
  },
  methods: {
    getNewCount() {
      return this.count
    },
    updateCount(val) {
      this.count = val
    }
  }
}
</script>
